import { defaultNavBar, formatDate, loadPageLess } from 'user/site';
import { ShoppingService } from 'user/services/shoppingService';
import { AccountService } from 'user/services/accountService';
import * as ui from "maishu-ui-toolkit";
import React = require('react');
import { PageProps, Application } from 'maishu-chitu-react';
import { PageSpiner, PageSpinerContext } from 'user/../share/controls/page-spiner';

// export default function (page: chitu.Page) {
//     app().loadPageLess(page.name); debugger;


//     shopping.order(page.data.id as string).then(order => {
//         ReactDOM.render(<PurchasePage order={order} />, page.element);
//     })
// }

type PayType = 'balance' | 'weixin' | 'alipay';

interface Props extends PageProps {
    app: Application,
    data: {
        id: string
    }
}

type LoadResult = ReturnType<PurchasePage["loadData"]> extends Promise<infer U> ? U : any;

export default class PurchasePage extends React.Component<Props, { payType: PayType }> {
    accoutService: AccountService;
    shoppingService: ShoppingService;

    constructor(props) {
        super(props);

        this.state = { payType: 'balance' };

        this.accoutService = this.props.createService(AccountService);
        this.shoppingService = this.props.createService(ShoppingService);
        loadPageLess(this.props.source.name);

    }
    private balancePurchase(order: Order) {
        console.assert(order.Sum != null);
        console.assert(order.Sum == order.Amount + order.Freight);

        return this.accoutService.payOrder(order.Id, order.Sum);
    }
    async loadData() {
        let order = await this.shoppingService.order(this.props.data.id)
        return { order }
    }
    render() {
        return <React.Fragment>
            <header key="h">
                {defaultNavBar(this.props.source, { title: '订单概况' })}
            </header>
            <PageSpiner load={() => this.loadData()}>
                <PageSpinerContext.Consumer>
                    {args => {
                        let { order } = args.result as LoadResult;
                        return <React.Fragment>
                            <section key="v">
                                <div className="container">
                                    <div className="row" style={{ paddingBottom: 10 }}>
                                        <label className="col-xs-3" style={{ paddingRight: 0 }}>订单状态</label>
                                        <div className="col-xs-9" style={{ color: '#f70' }}>
                                            {this.shoppingService.orderStatusText(order.Status)}
                                        </div>
                                    </div>
                                    <div className="row" style={{ paddingBottom: 10 }}>
                                        <label className="col-xs-3" style={{ paddingRight: 0 }}>订单编号</label>
                                        <div className="col-xs-9">{order.Serial}</div>
                                    </div>
                                    <div className="row" style={{ paddingBottom: 10 }}>
                                        <label className="col-xs-3" style={{ paddingRight: 0 }}>订单总计</label>
                                        <div className="col-xs-9 price">￥{order.Sum.toFixed(2)}</div>
                                    </div>
                                    <div className="row" style={{ paddingBottom: 10 }}>
                                        <label className="col-xs-3" style={{ paddingRight: 0 }}>收货信息</label>
                                        <div className="col-xs-9">{order.ReceiptAddress}</div>
                                    </div>
                                    <div className="row" style={{ paddingBottom: 10 }}>
                                        <label className="col-xs-3" style={{ paddingRight: 0 }}>发票信息</label>
                                        <div className="col-xs-9">{order.Invoice}</div>
                                    </div>
                                    <div className="row" style={{ paddingBottom: 10 }}>
                                        <label className="col-xs-3" style={{ paddingRight: 0 }}>下单时间</label>
                                        <div className="col-xs-9" data-bind="text:['{0:g}', order.OrderDate]">
                                            {formatDate(order.OrderDate)}
                                        </div>
                                    </div>
                                    {order.Remark ?
                                        <div data-bind="visible:ko.unwrap(order.Remark)" className="row" style={{ paddingBottom: 10 }}>
                                            <label className="col-xs-3" style={{ paddingRight: 0 }}>订单备注</label>
                                            <div className="col-xs-9">
                                                {order.Remark}
                                            </div>
                                        </div> : null}
                                    <div style={{ marginBottom: 10 }}>
                                        提示：请在下单24小时内付款，过期后订单将自动取消。
                                        </div>
                                    <hr className="row" />
                                    <button className="cust-prop selected">
                                        余额支付
                                        </button>
                                    <button className="cust-prop">
                                        微信支付
                                        </button>
                                </div>

                            </section>
                            <footer key="f">
                                {order.Status == 'WaitingForPayment' ?
                                    <div className="container">
                                        <div className="form-group">
                                            <button className="btn btn-block btn-primary"
                                                ref={(o: HTMLButtonElement) => {
                                                    if (!o) return;
                                                    o.onclick = ui.buttonOnClick(() => {
                                                        return this.balancePurchase(order).then(() => {
                                                            this.props.app.redirect("shopping_orderList");//'shopping_orderList'
                                                        });
                                                    })
                                                }}>立即支付</button>
                                        </div>
                                    </div> : null}
                            </footer>
                        </React.Fragment>
                    }}
                </PageSpinerContext.Consumer>
            </PageSpiner>
        </React.Fragment>
    }
}

{/*  */ }